<template>
  <div>
    <div id="slider" class="mui-slider">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <!-- 对于需要操作style 需要属性绑定！ -->
          <a
            :class="['mui-control-item',item.id ==0 ? 'mui-active':'']"
            href="#item1mobile"
            v-for="item in categoryList"
            :key="item.id"
            @tap="getImg(item.id)"
          >{{ item.title }}</a>
        </div>
      </div>
    </div>

    <ul class="img-list">
      <router-link  v-for="item in imgList" :key="item.id" tag="li" :to="'/home/photoInfo/'+item.id">
        <img v-lazy="item.img_url">
        <div class="info">
          <h5 class="info-title">{{ item.title }}</h5>
          <div class="info-body">{{ item.zhaiyao }}</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
// 引入mui-js
import mui from "../../../lib/mui/js/mui.min.js";

import { Toast } from "mint-ui";

export default {
  data: function() {
    return {
      categoryList: [], //这个数组用来存放--获取分类的数据
      imgList: []
    };
  },
  mounted() {
    mui(".mui-scroll-wrapper").scroll({
      // 要操作dom上的元素 ----- 必须等到dom结构已经渲染页面才行！------
      // 所以要将调用的内容放入到mounted中！----
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  created() {
    this.getList();
    this.getImg(0);
  },
  methods: {
    getList() {
      this.$http.get("api/getimgcategory").then(function(result) {
        // 先添加----一个对象---然后在绑定上去！
        result.body.message.unshift({ title: "全部", id: 0 });
        this.categoryList = result.body.message;
      });
    },
    getImg(id) {
      this.$http.get("api/getimages/" + id).then(
        function(result) {
          if (result.body.status == 0) {
            this.imgList = result.body.message;
          } else {
            Toast("图片加载失败");
          }
        },
        function(err) {
          Toast("图片加载失败！");
        }
      );
    }
  }
};
</script>


<style lang='scss' scoped>
    *{
        touch-action:pan-y;
    }
    .img-list{
        padding:0 5px;
        padding:0;
        margin:0;
        
      li{
        position:relative;
        list-style:none;
        margin:5px;
        box-shadow:0 0 5px #ccc;
        img{
        width:100%;
        height:100%;
        display:block;
        }
   
         background-color:#ccc;
         img[lazy=loading] {
         width: 40px;
         height: 300px;
         margin: auto;
      }
    }
    .info{
      position:absolute;
      bottom:0;
      color:#fff;
      text-align:left;
      max-height:68px;
      background-color:rgba(0,0,0,0.4);
      .info-title{
        font-size:13px;
        color:#fff;
      }
      .info-body{
        font-size:12px;
      }
    }
   
    }
</style>

